<template>
  <div class="v-step">
    <div class="left-area">
      <el-radio-group v-model="activeKey">
        <el-radio
          v-for="(item, index) in steps"
          :key="item.key"
          :label="item.key"
          :disabled="item.disabled || handleDisabled(index)"
          :title="index + 1 + '. ' + $t(item.name)"
          size="large"
        >
          {{ index + 1 + ". " + $t(item.name) }}
        </el-radio>
      </el-radio-group>
    </div>
    <div class="right-area">
      <keep-alive>
        <component
          :is="activeStep.component"
          :key="activeStep.key"
          v-bind="activeStep.params"
          @stepValueChange="(val, path) => stepValueChange(val, path, activeStep.key)"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";

export interface StepItem {
  key: string;
  component: any;
  name: string;
  params?: Record<string, any>;
  nextStepDisabled?: boolean;
  nextStepDisabledKeys?: string[]; // 当值未设置时，那几步禁用
  valueName?: string; // 值对应的key名
  disabled?: boolean;
  dataType?: string;
  [key: string]: any;
}

const props = defineProps<{
  steps: StepItem[];
  modelValue: string;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
  (e: "stepValueChange", value: any, path: string[]): void;
}>();

const activeKey = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  }
});

const activeStep = computed(() => {
  return props.steps.filter(step => step.key === activeKey.value)[0];
});

const stepValueChange = (val: any, path: string[] = [], componentKey: string) => {
  const newPath = [componentKey, ...path];
  emit("stepValueChange", val, newPath);
};

const handleDisabled = (index: number) => {
  let disabled = false;
  for (let i = 0; i < index; i++) {
    const currentStep = props.steps[i];
    if (currentStep.nextStepDisabled) {
      disabled = true;
      break;
    }
  }
  return disabled;
};
</script>
<style lang="scss">
.v-step {
  display: flex;
  flex: 1;
  overflow: hidden;
  > .left-area {
    display: flex;
    width: 200px;
    height: 100%;
    background: #f4f5ff;
    padding: 8px 16px;
    .el-radio-group {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      .el-radio {
        width: 100%;
        &.el-radio--large {
          height: 38px;
          .el-radio__label {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.65);
          }
          .el-radio__input {
            font-size: 16px;
            .el-radio__inner {
              width: 16px;
              height: 16px;
              border-color: #ccc;
              background-color: #fff;
              &::after {
                width: 8px;
                height: 8px;
                background-color: #fff;
              }
            }
            &.is-checked {
              .el-radio__inner {
                border-color: #747ad0;
                &::after {
                  background-color: #747ad0;
                }
              }
              .el-radio__label {
                color: rgba(0, 0, 0, 0.65);
              }
            }
            &.is-disabled {
              .el-radio__inner {
                background-color: #f5f7fa;
                border-color: #e4e7ed;
              }
            }
          }
        }
        &.is-disabled {
          .el-radio__label {
            color: #a8abb2;
          }
        }
      }
      .el-radio__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  > .right-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
    > .v-tree-select {
      border: 1px solid #e4e4e4;
      border-top: 0;
    }
    .v-tree-select {
      .el-tabs__header {
        background-color: #f4f5ff !important;
      }
      .right-area {
        .count {
          background-color: #f4f5ff;
        }
      }
      .operate-area {
        background-color: #f4f5ff;
      }
    }
  }
}
</style>
